<template>
  <div style="max-width:982px;border: 0">
    <div class="category-container">
      <div class="list-wrapper1">
        <!--        <ul class="cat-list" v-for="(data, index) in choiceList" :key="index">-->
        <!--          <li-->
        <!--              v-for="(item, idx) in data"-->
        <!--              :key="idx"-->
        <!--              :class="{'cat-item': true, 'on': chosenList[index] && item.cat_id == chosenList[index].cat_id}"-->
        <!--              @click.stop="onCatClick(item, index)">{{ item.cat_name }}-->
        <!--          </li>-->
        <!--        </ul>-->
      </div>
      <el-cascader-panel :props="elProps" v-model="catList"
                         @change="changeModelValue"
                         :clearable="true" ref="selector"></el-cascader-panel>
    </div>
  </div>
</template>
<script lang="ts">
import {defineComponent, toRefs, reactive, ref, Ref} from 'vue'
import http from "@/plugin/http";

export default defineComponent({

  setup() {
    let tmpNode = {loading: false}
    let lastValue = ''
    const selector: Ref = ref(null)
    const catList = reactive([])
    const elProps = reactive({
      lazy: true,
      // eslint-disable-next-line @typescript-eslint/no-empty-function
      lazyLoad: function (node: Record<string, any>, resolve: any) {
        if (tmpNode.loading) return
        tmpNode = node as any
        if (node.level > 0) lastValue = node.data.value
        _requestData((data: Record<string, any>[]) => {
          resolve(data)
        })
      },
      checkStrictly: true,
      node: {loading: false},
    })

    const state = reactive({
      chosenList: [],
      defaultTmp: [],
      isOnLoading: false,
      value: [],
    })


    // 请求数据
    const _requestData = async (resolve: any) => {
      let params: Record<string, string | number> = {}
      params.size = 1000000
      params.pid = lastValue
      const res = await http.get('/goods.category', params)
      if (res.data.code !== 0) return
      let dataList = res.data.data.list;
      // dataList.forEach(item => item.leaf = !item[props.leaf])
      dataList.forEach((item: Record<string, string | boolean>) => item.leaf = false)
      resolve(dataList)
    }

    const getData = () => {
      const node = selector.value.getCheckedNodes()[0]
      return {
        value: node ? node.pathValues : [],
        label: node ? node.pathLabels : [],
        lastNodeData: node.data
      }
    }

    const changeModelValue = (val: any): void => {
      console.log(val)
    }

    return {
      ...toRefs(state),
      selector,
      elProps,
      changeModelValue,
      catList,
      getData
    }
  },


  // computed: {
  //   catPath() {
  //     let path = [];
  //     for (let i in this.chosenList) path.push(this.chosenList[i].cat_name);
  //     return path.join(" > ");
  //   }
  // },

  // created() {
  //   this.getCategories('');
  //
  //   // this.props.checkStrictly = true
  //   // this.props.lazyLoad = (node, resolve) => {
  //   //     if (this.node.loading) return
  //   //     this.node = node
  //   //     if (node.level > 0) this.lastValue = node.value
  //   //     this.getAsyncData(resolve)
  //   // }
  // },

  // methods1: {
  //
  //   init(initVal) {
  //     this.defaultTmp = initVal;
  //     if (!this.isOnLoading || !this.choiceList.length) return this.getCategories(0);
  //     this.defaultChoiceDetect(this.choiceList[0]);
  //   },
  //
  //   getLastId() {
  //     if (this.chosenList.length) return this.chosenList[this.chosenList.length - 1].cat_id
  //     return ''
  //   },
  //
  //   getPathList() {
  //     return JSON.parse(JSON.stringify(this.chosenList))
  //   },
  //
  //   async getCategories(pid) {
  //     if (this.isOnLoading) return;
  //     this.isOnLoading = true;
  //     const res = await this.http.get('/goods.category', {
  //       pid, status: 1, size: 100000
  //     });
  //     this.isOnLoading = false;
  //     if (res.data.code !== 0) return this.$message.error(res.data.message);
  //     if (res.data.data.list.length) this.choiceList.push(res.data.data.list);
  //     this.defaultChoiceDetect(res.data.data.list);
  //   },
  //
  //
  //   onCatClick(item, level) {
  //     let start = level + 1;
  //     this.choiceList.splice(start);
  //     this.chosenList.splice(level);
  //     this.chosenList.push(item);
  //     this.getCategories(item.cat_id, level);
  //   },
  //
  //   // 默认选中检测
  //   defaultChoiceDetect(data) {
  //     if (!this.defaultTmp.length) return;
  //     const chosen = this.defaultTmp.shift();
  //     const object = data.find(item => item.cat_id === chosen.cat_id);
  //     if (typeof object === 'undefined') return;
  //     this.onCatClick(object, this.chosenList.length);
  //   },
  // }
})
</script>
<style>
.h-scroll {
  overflow: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

.category-container {
  width: 100%;
  height: 400px;
  background: #FFF;
}

.list-wrapper {
  height: 100%;
  border: 1px solid #d5e4fa;
  position: relative;
  overflow: hidden;
}

.cat-list {
  float: left;
  width: 243px;
  border-right: 2px solid #d5e4fa;
  background: #fff;
  height: 100%;
  overflow: auto
}

.cat-list:last-child {
  border-right: none
}

.cat-item {
  height: 20px;
  line-height: 20px;
  padding: 0 6px;
  font-size: 14px;
  border: 1px solid #FFF;
  margin: 4px;
}

.cat-item:hover, .cat-item.on {
  cursor: pointer;
  background: #dff1fb;
  border: 1px dotted #82bce0;
}

.cat-path {
  margin-top: 10px;
  background-color: #FFFAF2;
  padding: 4px 10px;
  border: 1px solid #FEDBAB;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>